<template>
	<sl-report :pageParms="parms" @pageChange="pageChange" @nextPage="nextPage">
		<template #title>
			<div style="display: flex;justify-content: space-between">
				<div>
					<Button ghost icon="md-add" type="primary" @click="selectItem = {};showEditVIew = true">
						添加账号
					</Button>
				</div>
				<Form :label-width="80" inline>
					<FormItem label="账号">
						<Input v-model="parms.keywords" placeholder="请输入登录账号/姓名查询" type="text"></Input>
					</FormItem>
					<FormItem label="账号状态:" prop="statuz">
						<Select style="width: 100px;" v-model="parms.statuz" placeholder="请选择账号状态">
                            <Option value="all">全部</Option>
                            <Option value="1">启用</Option>
                            <Option value="0">禁用</Option>
                        </Select>
                    </FormItem>
					<Button style="margin-left: 10px;" type="primary" @click="search">查询
					</Button>
				</Form>
			</div>
		</template>
		<template #body="{h}">
			<div ref="body" style="flex: 1;overflow:hidden;">
				<Table :columns="columns" :data="queryList" :height="h" highlight-row
					   stripe>
					<template slot="statuz" slot-scope="{ row }">
						<Tag v-if="row.statuz == 1" color="blue">启用</Tag>
						<Tag v-if="row.statuz == 0" color="red">禁用</Tag>
					</template>
					<template slot="caozuo" slot-scope="{ row }">
						<Button size="small" style="margin-right:10px;" type="primary"
								@click="selectItem = row;showEditVIew = true">
							修改
						</Button>
						<Button size="small" style="margin-right:10px;" type="error" @click="deleteAdmin(row)">
							删除
						</Button>
					</template>
				</Table>

			</div>
		</template>
		<template #modal>
			<Modal v-model="showEditVIew" :title="Object.keys(selectItem).length ? '修改账号' : '添加账号'"
				   footer-hide>
				<user-edit v-if="showEditVIew" :selectItem="selectItem" @add="add" @edit="edit"/>
			</Modal>
		</template>
	</sl-report>
</template>

<script>
import UserEdit from "@/view/demo/edit.vue";
import moment from "moment";
import SlReport from "@/components/sl-report.vue";
import SlPage from "@/components/sl-page.vue";

export default {
	name: "demo-template",
	components: {SlPage, SlReport, UserEdit},
	data() {
		return {
			showEditVIew: false,
			columns: [
				{title: "序号", type: "index", width: 80, align: "center"},
				{title: "登录账号", key: "loginName"},
				{title: "姓名", key: "nickName"},
				{title: "状态", key: "statuz", slot: "statuz"},
				{title: "日期", key: "createTime"},
				{title: "操作", slot: "caozuo", width: 320}
			],
			parms: {
				pageIndex: 1,
				pageSize: 10,
				keywords: '',
				statuz: 'all',
				total: 0
			},
			dataList: [],
			queryList: [],
			selectItem: []
		}
	},
	mounted() {
		this.getData()
	},
	methods: {
		search() {
			let dataList = JSON.parse(JSON.stringify(this.dataList));
			if (this.parms.statuz === 'all') {
				this.queryList = dataList;
			}else {
				this.queryList = dataList.filter(item => item.statuz == this.parms.statuz)
			}
			if (!this.parms.keywords) {
                return
            }
			this.queryList = dataList.filter(item => item.loginName.indexOf(this.parms.keywords) > -1 || item.nickName.indexOf(this.parms.keywords) > -1)
		},
		// 分页
		nextPage(page) {
			this.parms.pageIndex = page;
			this.getData();
		},
		pageChange(pageSize) {
			this.parms.pageSize = pageSize;
			this.getData();
		},
		getData() {
			let data = [
				{
					id: '1231',
					loginName: 'fineday',
					nickName: '赵旭',
					statuz: 1,
					loginPwd: '123456',
					createTime: '2020-01-01 12:12:12',
				}
			]
			this.queryList = data;
			this.dataList = data;
		},
		add(row) {
			row.createTime = moment().format('YYYY-MM-DD HH:mm:ss');
			this.dataList.push(row);
			this.queryList = this.dataList;
			this.$Message.success('添加成功');
			this.showEditVIew = false
		},
		edit(row) {
			let index = this.dataList.findIndex(item => item.id === row.id)
			this.dataList.splice(index, 1, row)
			this.queryList = this.dataList;
			this.$Message.success('修改成功');
			this.showEditVIew = false
		},
		deleteAdmin(row) {
			this.$Modal.confirm({
				title: '提示',
				content: '确定要删除吗？',
				onOk: () => {
					let index = this.dataList.findIndex(item => item.id === row.id)
					this.dataList.splice(index, 1)
					this.queryList = this.dataList;
					this.$Message.success('删除成功');
				}
			})
		}
	}
}
</script>

<style scoped>
/deep/ .ivu-card {
	display: flex;
	flex-direction: column;
}

/deep/ .ivu-card-body {
	flex: 1;
}

</style>
